/*
 * @Description: 结果统计弹窗
 * @Author: Zzt
 * @Date: 2022-10-11 14:45:01
 * @LastEditTime: 2022-10-26 11:42:59
 */
import * as echarts from 'echarts/core';
import { Modal, Segmented } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { PieChartOutlined } from '@ant-design/icons';
import styles from '../styles/statistics.module.scss';
import classNames from 'classnames/bind';
import { PieChart, PieSeriesOption } from 'echarts/charts';
import {
  TooltipComponent,
  TooltipComponentOption,
  LegendComponent,
  LegendComponentOption
} from 'echarts/components';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, PieChart, CanvasRenderer, LabelLayout, LegendComponent]);
type EChartsOption = echarts.ComposeOption<
  TooltipComponentOption | PieSeriesOption | LegendComponentOption
>;
const cx = classNames.bind(styles);

interface IStatisticsProps {
  visible: boolean;
  onClose: any;
  detectionResultArchives: any;
}
const Statistics = (props: IStatisticsProps) => {
  const { visible, onClose, detectionResultArchives } = props;
  const [value, setValue] = useState<string | number>('A');
  const [segmentedData, setSegmentedData] = useState([]);
  const [showData, setShowData] = useState<any>({});

  const onChange = (event: any) => {
    console.log(event);
    setShowData(segmentedData.find((item) => item.value === event));
    setValue(event);
  };
  useEffect(() => {
    console.log('1', segmentedData);
    if (detectionResultArchives) {
      setSegmentedData(
        detectionResultArchives.map((item: any) => {
          return {
            label: item.levelInfo.level_name,
            value: item.levelInfo.level,
            check_total_count: item.stat.check_total_count,
            check_pass_count: item.stat.check_pass_count,
            pieData: [
              { value: item.stat.check_pass_count, name: '成功' },
              { value: item.stat.check_total_count - item.stat.check_pass_count, name: '失败' }
            ]
          };
        })
      );
    }
  }, [detectionResultArchives]);
  useEffect(() => {
    if (segmentedData) {
      console.log('2', segmentedData[0]);
      setValue(segmentedData[0]?.value);
      setShowData(segmentedData[0]);
    }
  }, [segmentedData]);
  const Echarts = () => {
    const chartRef = useRef();

    const options: EChartsOption = {
      color: ['#67c23a', '#f56c6c'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: showData.pieData
        }
      ]
    };
    useEffect(() => {
      // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
      const chart = echarts.init(chartRef.current);

      // 设置图表实例的配置项和数据
      chart.setOption(options);

      // 组件卸载
      return () => {
        // myChart.dispose() 销毁实例。实例销毁后无法再被使用
        chart.dispose();
      };
    }, []);
    // option && myChart.setOption(option);
    return <div style={{ height: '300px' }} ref={chartRef}></div>;
  };

  return (
    <Modal visible={visible} onCancel={onClose} footer={null} title="检测结果统计">
      <Segmented options={segmentedData} value={value} onChange={onChange} block />
      <div className={cx('pie')} id="main">
        <Echarts />
      </div>
      <div className={cx('border')}>
        通过检测<a className={cx('green')}>{showData?.check_pass_count}</a>个 未通过检测
        <a className={cx('red')}>{showData?.check_total_count - showData?.check_pass_count}</a>个
        通过率
        <a className={cx('red')}>
          {((showData?.check_pass_count / showData?.check_total_count) * 100).toFixed(1)}%
        </a>
      </div>
    </Modal>
  );
};
export default Statistics;
